<template>
  <div>
    <h3>选项式API(配置):Props</h3>

    <div>
      <div>
        <h3 @click="editTitle">{{ tle }}</h3>
        <p>props.des:{{ des }}</p>
        <p>props.user.name:{{ user.name }}</p>
        <p>props.user.sex:{{ user.sex }}</p>
      </div>
      <div v-show="isShow" class="isShowHide">显示或隐藏</div>
    </div>
    <p></p>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      required: true
    },
    des: {
      type: [String, Number],
      default: 'des默认值'
    },
    dao: {
      type: Object,
      default() {
        return {
          name: '你好啊'
        }
      }
    },
    user: {
      type: Object,
      default(newprops) {
        return {
          name: '你说呢' + newprops.title,
          sex: 1
        }
      }
    },
    propH: {
      // 默认值的函数
      type: Function,
      default() {
        console.log('子组件props函数被调用')
        return '这是一个默认方法'
      }
    },
    des2: {
      type: [String, Number],
      default: 'des2默认值'
    }
  },
  data() {
    return {
      tle: this.title,
      sonTitle: '我是子组件定义的标题',
      isShow: false
    }
  },
  methods: {
    editTitle() {
      // 不能直接修改 props的值
      // 但是可以修改被props的值初始化后的状态变量
      this.tle = '可以修改被props的值初始化后的状态变量'
      this.propH(this.sonTitle, this.showHandler)
    },
    showHandler() {
      this.isShow = !this.isShow
    }
  },
  computed: {},
  mounted() {},
  watch: () => {}
}
</script>

<style lang="scss" scoped>
.isShowHide {
  height: 100px;
  width: 100px;
  background-color: cyan;
}
</style>
